import React, { Component, Fragment } from "react"
import { CSSTransition } from "react-transition-group"
import "./style.css"

export default class Boss extends Component {
  constructor(props) {
    super(props)
    this.toggle = this.toggle.bind(this)
    this.state = {
      isShow: true
    }
  }

  toggle() {
    this.setState({
      isShow: !this.state.isShow
    })
  }

  render() {
    return (
      <Fragment>
        <CSSTransition
          // 用于判断是否出现的状态
          in={this.state.isShow}
          // 动画持续时间
          timeout={2000}
          // className值，防止重复
          classNames="boss-text"
          // 加上这个的意思是在元素退场时，自动把DOM也删除，这是以前用CSS动画没办法做到的。
          unmountOnExit>
          <div>BOSS级人物-孙悟空</div>
        </CSSTransition>
        <button onClick={this.toggle}>召唤Boss</button>
      </Fragment>
    )
  }
}
